<template>
  <div class="register">
    <!-- 输入任意文本 -->
    <van-field v-model="data.VIPname" label="会员名" placeholder="请填写2-16个字的中文名" />
    <!-- 输入手机号，调起手机号键盘 -->
    <van-field v-model="data.telephone" type="tel" label="手机号码" placeholder="请输入电话号码"/>
    <!-- 输入密码 -->
    <van-field v-model="data.VIPpassword" type="password" label="设置密码" placeholder="请输入6-12位的密码" />
    <!-- <van-field v-model="data.pass" type="password" label="再次输入密码" placeholder="重新输入密码" /> -->
    <!-- 输入性别 -->
    <section class="section-sex">
      <van-radio-group v-model="data.radio" direction="horizontal"
        ><b class="r-sex">性别：</b>
        <van-radio name="1">男</van-radio>
        <van-radio name="2">女</van-radio>
      </van-radio-group>
    </section>
    <!-- 输入生日 -->
<!-- <van-calendar v-model="show" :min-date="minDate" :max-date="maxDate" /> -->

    <!-- <van-calendar v-model="data.showCalendar" @confirm="onConfirm" /> -->
    <div class="r-center">
      <van-button type="default" class="btn-center" @click="setUser"
        >我填好啦</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'register',
  data() {
    return {
      data: {
        telephone: '',
        VIPname: '',
        VIPpassword: '',
        radio: '1',
        show: false,
        // minDate: new Date(1970, 0, 1),
        // maxDate: new Date(2010, 11, 31),
      },
    }
  },
  methods: {
    // onConfirm(date) {
    //   this.value = `${date.getMonth() + 1}/${date.getDate()}`
    //   this.showCalendar = false
    // },
    setUser() {
      const obj = {}
      const user = JSON.parse(localStorage.getItem('user')) || []
      obj.VIPname = this.data.VIPname
      obj.telephone = this.data.telephone
      obj.password = this.data.VIPpassword
      const passZZ = /^.{6,12}$/
      const phoneNumber = /^13|15|17|18|19[0-9]{8}$/
      const nameYZ = /^(?:[\u4e00-\u9fa5·]{2,16})$/
      // 验证名字格式
      if (!nameYZ.test(this.data.VIPname)) {
        this.$toast({
          type: 'fail',
          message: '请填写2-16个的中文名称哟',
        })
        return false
      }
      // 验证电话号码格式
      if (!phoneNumber.test(obj.telephone)) {
        this.$toast({
          type: 'fail',
          message: '号码格式不正确',
        })
        return false
      }
      // 验证密码格式
      if (!passZZ.test(obj.password)) {
        this.$toast({
          type: 'html',
          message: '请输入6-12位的密码',
        })
        return false
      }
      const res = user.some((item) => {
        return item.telephone === obj.telephone
      })
      // 验证是否已注册
      if (res) {
        this.$toast({
          type: 'success',
          message: '该号码已经注册了，换个号码吧',
        })
        return false
      } else {
        // 注册信息
        obj.birthday = this.data.birthday
        obj.radio = this.data.radio
        user.push(obj)
        localStorage.setItem('user', JSON.stringify(user))
        this.data.VIPname = ''
        this.data.telephone = ''
        this.data.VIPpassword = ''
        this.data.radio = ''
        this.data.birthday = ''
        if (obj) {
          this.$toast({
            type: 'success',
            message: '注册成功,去登录吧',
          })
          // location.href = '../login'
          this.goLogin()
        }
      }
    },
    goLogin() {
      this.$router.push({
        path: '/login',
      })
    },
  },
}
</script>

<style lang="scss" scoped>

.register {
  width: 90%;
  margin: 50px auto;
  border: 1px solid;
  .r-sex {
    font-weight: 400;
    padding-left: 15px;
    opacity: 0.8;
    font-size: 14px;
  }
  .section-sex {
    margin: 15px 0;
  }
  .r-center {
    width: 100px;
    height: 50px;
    margin: 30px auto;
  }
}
</style>
